<template>
  <div class="openQuestionBank">
    <componentsHeader></componentsHeader>
    <el-row class="routerLink">
      <el-col >
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item to="/operationMenu">首页</el-breadcrumb-item>
          <el-breadcrumb-item to>开封题库</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <div class="main">
      <el-aside width="200px">
        <ul>
          <li
            v-for="tabs in tabsList"
            :key="tabs"
            @click="tabsType = tabs"
            :class="{'active': tabsType == tabs}">{{tabs}}
          </li>
        </ul>
      </el-aside>
      <el-main>
        <el-row class="pwdVerify" v-if="tabsType == '封题'">
          <span @click="showDialogFn('密码验证')">密码验证 ?</span>
        </el-row>
        <el-row class="content">
          <p class="title">{{tabsType == '封题'?'封题密码设置':'开题密码验证'}}</p>
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="125px" class="demo-ruleForm">
            <el-form-item label="一级密码" prop="onePassword">
              <el-input type="password" v-model="ruleForm.onePassword" :placeholder="tabsType == '封题'?'设置6位数字密码':'输入6位数字密码'"></el-input>
            </el-form-item>
            <el-form-item label="二级密码" prop="twoPassword">
              <el-input type="password" v-model="ruleForm.twoPassword" :placeholder="tabsType == '封题'?'设置6位数字密码':'输入6位数字密码'"></el-input>
            </el-form-item>
            <el-form-item label="三级密码" prop="threePassword">
              <el-input type="password" v-model="ruleForm.threePassword" :placeholder="tabsType == '封题'?'设置6位数字密码':'输入6位数字密码'"></el-input>
            </el-form-item>
            <el-form-item label="封题卷面" prop="closeTest" v-if="tabsType == '封题'" >
              <el-checkbox-group v-model="ruleForm.closeTest" style="pointer-events:none;">
                <el-checkbox label="A" name="closeTest">A卷</el-checkbox>
                <el-checkbox label="B" name="closeTest">B卷</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="开题卷面" prop="openText" v-else>
              <el-radio-group v-model="ruleForm.openText">
                <el-radio label="A">A卷</el-radio>
                <el-radio label="B">B卷</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-row class="btnBox">
              <p @click="resetForm('ruleForm')">重置</p>
              <p @click="submitForm('ruleForm')">{{tabsType == '封题'?'设置':'确认'}}</p>
            </el-row>
          </el-form>
        </el-row>
      </el-main>
    </div>
    <componentsFooter></componentsFooter>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      @close="closeDialogFn"
      :close-on-click-modal="false"
      width="526px">
      <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="125px" class="demo-ruleForm">
        <el-form-item label="一级密码" prop="onePassword">
          <el-input type="password" v-model="ruleForm2.onePassword" placeholder="输入6位数字密码"></el-input>
        </el-form-item>
        <el-form-item label="二级密码" prop="twoPassword">
          <el-input type="password" v-model="ruleForm2.twoPassword" placeholder="输入6位数字密码"></el-input>
        </el-form-item>
        <el-form-item  label="三级密码" prop="threePassword">
          <el-input type="password" v-model="ruleForm2.threePassword" placeholder="输入6位数字密码"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <p @click="dialogVisible = false">取 消</p>
        <p type="primary" @click="dialogSureFn('ruleForm2')">确 定</p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import componentsHeader from "@/components/header.vue";
  import componentsFooter from "@/components/footer.vue";

  export default {
    name: "openQuestionBank",
    data() {
      var pwdVerification = (rule, value, callback) => {
        let regExp = /^[0-9]\d{5}$/;
        if (value === '' || value === null) {
          callback(new Error('密码不能为空'));
        } else if (!regExp.test(value)) {
          callback(new Error('密码只能是长度为6位的数字'));
        } else {
          callback()
        }
      };
      var verification1 = (rule, value, callback) => {
        if(this.dialogTitle == '二次确认') {
          if (value != this.ruleForm.onePassword) {
            callback(new Error('两次密码不一致'));
          }else {
            callback()
          }
        }else{
          callback()
        }
      };
      var verification2 = (rule, value, callback) => {
        if(this.dialogTitle == '二次确认') {
          if (value != this.ruleForm.twoPassword) {
            callback(new Error('两次密码不一致'));
          }else {
            callback()
          }
        }else{
          callback()
        }
      };
      var verification3 = (rule, value, callback) => {
        if(this.dialogTitle == '二次确认') {
          if (value != this.ruleForm.threePassword) {
            callback(new Error('两次密码不一致'));
          }else {
            callback()
          }
        }else{
          callback()
        }
      };
      return {
        tabsList: ['封题', '开题'],
        tabsType: '封题',
        dialogVisible: false,//弹窗
        dialogTitle: '',//弹窗标题
        ruleForm: {
          onePassword: '',
          twoPassword: '',
          threePassword: '',
          closeTest: ["A","B"],
          openText: '',
        },
        ruleForm2: {//弹窗表单
          onePassword: '',
          twoPassword: '',
          threePassword: '',
        },
        rules: {
          onePassword: [
            {required: true, validator: pwdVerification, trigger: 'blur'},
          ],
          twoPassword: [
            {required: true, validator: pwdVerification, trigger: 'blur'},
          ],
          threePassword: [
            {required: true, validator: pwdVerification, trigger: 'blur'},
          ],
          closeTest: [
            {type: 'array', required: true, message: '请至少选择一个被封试卷', trigger: 'change'}
          ],
          openText: [
            {required: true, message: '请选择开封试卷', trigger: 'change'}
          ],
        },
        rules2: {
          onePassword: [
            {required: true, validator: pwdVerification, trigger: 'blur'},
            {required: true, validator: verification1, trigger: 'blur'},
          ],
          twoPassword: [
            {required: true, validator: pwdVerification, trigger: 'blur'},
            {required: true, validator: verification2, trigger: 'blur'},
          ],
          threePassword: [
            {required: true, validator: pwdVerification, trigger: 'blur'},
            {required: true, validator: verification3, trigger: 'blur'},
          ],
        }
      }
    },
    components: {
      componentsHeader,
      componentsFooter
    },
    methods: {
      //显示弹窗事件
      showDialogFn(val) {
        this.ruleForm2 = {//弹窗表单
          onePassword: '',
          twoPassword: '',
          threePassword: '',
        };
        this.dialogVisible = true;
        this.dialogTitle = val
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // console.log(this.ruleForm);
            if(this.tabsType == '开题'){
              this.verifycasepasswordFn()
            }else if(this.tabsType == '封题'){
              this.showDialogFn('二次确认')
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //重置表单
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      //弹窗确认
      dialogSureFn(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.dialogTitle == '二次确认') {//封题
              this.sealcaseFn()
            } else if (this.dialogTitle == '密码验证') {
              this.verifycasepwdFn()
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //弹窗关闭回调
      closeDialogFn() {
        this.resetForm('ruleForm')
        this.resetForm('ruleForm2')
      },
      //封题
      sealcaseFn(){
        let params = {
          sealPassword: this.ruleForm2.onePassword + this.ruleForm2.twoPassword + this.ruleForm2.threePassword,
          caseId: 0
        };
        this.$api.casePasswordService.sealcase(params).then(res => {
          // console.log(res,'封题');
          if(res.Code == 200){
            this.$notify({
              title: "提示",
              type: "success",
              message: "封题成功！"
            });
            this.resetForm('ruleForm')
            this.dialogVisible = false
          }
        }).catch(err =>{
          console.log(err,'err');
        })
      },
      //开题
      verifycasepasswordFn(){
        let params = {
          casePwd:  this.ruleForm.onePassword + this.ruleForm.twoPassword + this.ruleForm.threePassword,
          casePasswordType: 2,
          paperNameSuffix: this.ruleForm.openText
        };
        this.$api.casePasswordService.verifycasepassword(params).then(res => {
          // console.log(res,'开题');
          if(res.Code == 200) {
            this.$notify({
              title: "提示",
              type: "success",
              message: "试卷开启成功！"
            });
            this.resetForm('ruleForm')
          }
        }).catch(err =>{
          console.log(err,'err');
        })
      },
      //验证密码
      verifycasepwdFn(){
        let params = {
          casePwd: this.ruleForm2.onePassword + this.ruleForm2.twoPassword + this.ruleForm2.threePassword,
        };
        this.$api.casePasswordService.verifycasepwd(params).then(res => {
          // console.log(res,'密码验证');
          if(res.Code == 200) {
            this.$notify({
              title: "提示",
              type: "success",
              message: "密码正确，验证成功！"
            });
            this.dialogVisible = false
          }else{

          }
        }).catch(err =>{
          console.log(err,'err');
        })
      },
    },
    watch: {
      tabsType: {
        handler(val) {
          this.resetForm('ruleForm')
        }
      }
    }
  }
</script>

<style lang="less">
  .openQuestionBank {
    background: rgba(248, 248, 248, 1);
    /*min-width: 1440px;*/
    p{
      margin-bottom: 0;
    }
    .routerLink {
      min-width: 1200px;
      width: 75%;
      margin: 0 auto;
      float: unset;
      .el-breadcrumb {
        line-height: 60px;
        font-size: 14px;
        font-family: PingFangHK-Regular, PingFangHK;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);

        .el-breadcrumb__item {
          &:nth-of-type(1) {
            .el-breadcrumb__inner {
              color: #999;
            }
          }

          &:nth-of-type(2) {
            color: #333;
          }
        }
      }
    }

    .main {
      min-width: 1200px;
      width: 75%;
      margin: 0 auto 50px;
      display: flex;
      flex-direction: row;
      min-height: calc(100vh - 230px);

      .el-aside {
        min-height: calc(100vh - 230px);
        margin-right: 10px;
        background-color: #fff;

        li {
          cursor: pointer;
          line-height: 72px;
          text-align: center;
          font-size: 16px;
          font-family: PingFangHK-Regular, PingFangHK;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          border-bottom: 1px solid rgba(234, 234, 234, 1);

          &.active {
            color: #fff;
            background: rgba(1, 21, 92, 1);
          }
        }
      }

      .el-main {
        background-color: #fff;
        padding: 30px;
        position: relative;

        .pwdVerify {
          width: 100%;
          text-align: right;

          span {
            cursor: pointer;
            font-size: 14px;
            font-family: PingFangHK-Regular, PingFangHK;
            font-weight: 400;
            color: rgba(26, 125, 241, 1);
          }
        }

        .content {
          width: 400px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);

          .title {
            font-size: 20px;
            font-family: PingFangHK-Medium, PingFangHK;
            font-weight: 600;
            color: rgba(51, 51, 51, 1);
            margin-bottom: 50px;
            text-align: center;
          }


        }

      }
    }

    .el-form {
      .el-form-item {
        border: 1px solid rgba(222, 222, 222, 1);
        position: relative;
        margin-bottom: 30px;

        &.is-error {
          border: 1px solid #F56C6C;
        }

        .el-form-item__error {
          font-size: 14px;
        }

        .el-form-item__label {
          text-align: center;
          background: rgba(241, 241, 241, 1);
          color: #333;
          border-right: 1px solid rgba(222, 222, 222, 1);
          border-radius: unset;
          box-sizing: border-box;
          height: 40px;
          line-height: 40px;
        }

        .el-form-item__content {
          position: unset;

          .el-input__inner {
            border: none;
            outline: none;
          }

          .el-checkbox-group {
            height: 40px;
            box-sizing: border-box;
            padding-left: 20px;
            /*pointer-events: none;*/
            /*user-select: none;*/
          }

          .el-radio-group {
            margin-left: 20px;
          }
        }
      }

      .btnBox {
        text-align: center;
        padding-top: 20px;

        p {
          display: inline-block;
          width: 128px;
          height: 38px;
          background: rgba(255, 255, 255, 1);
          border-radius: 2px;
          border: 1px solid rgba(4, 151, 248, 1);
          margin-right: 30px;
          font-size: 14px;
          font-family: PingFangHK-Regular, PingFangHK;
          font-weight: 400;
          color: rgba(4, 151, 248, 1);
          box-sizing: border-box;
          cursor: pointer;
          text-align: center;
          line-height: 38px;

          &:hover {
            border: none;
            background: linear-gradient(90deg, rgba(2, 169, 254, 1) 0%, rgba(6, 136, 250, 1) 100%);
            box-shadow: 0px 8px 16px 0px rgba(2, 167, 254, 0.1);
            color: #fff;
            filter: blur(0px);
          }

          &:nth-of-type(2) {
            margin-right: 0;
          }
        }
      }

    }

    .el-dialog {
      padding-bottom: 40px;
      margin-top: 20vh !important;

      .el-dialog__header {
        text-align: center;
        font-size: 20px;
        font-family: PingFangHK-Medium, PingFangHK;
        font-weight: 600;
        color: rgba(51, 51, 51, 1);
        padding: 40px 20px 0;
      }

      .el-dialog__body {
        width: 360px;
        margin: 0 auto;
        padding-bottom: 0;
      }

      .el-dialog__footer {
        padding: 0;
        text-align: center;

        p {
          display: inline-block;
          width: 128px;
          height: 38px;
          background: rgba(255, 255, 255, 1);
          border-radius: 2px;
          border: 1px solid rgba(4, 151, 248, 1);
          margin-right: 30px;
          font-size: 14px;
          font-family: PingFangHK-Regular, PingFangHK;
          font-weight: 400;
          color: rgba(4, 151, 248, 1);
          box-sizing: border-box;
          cursor: pointer;
          text-align: center;
          line-height: 38px;

          &:hover {
            border: none;
            background: linear-gradient(90deg, rgba(2, 169, 254, 1) 0%, rgba(6, 136, 250, 1) 100%);
            box-shadow: 0px 8px 16px 0px rgba(2, 167, 254, 0.1);
            color: #fff;
            filter: blur(0px);
          }

          &:nth-of-type(2) {
            margin-right: 0;
          }
        }
      }
    }
  }

</style>
